<template>
  <div class="Message">
    <div class="bread">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/start' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a >消息</a></el-breadcrumb-item>
        <el-breadcrumb-item>消息操作</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="table">
      <el-table :data="tableData" stripe style="width: 100%" height="500">
        <el-table-column
          v-for="item in tableItem"
          :key="item.id"
          :prop="item.prop"
          :label="item.label"
        >
          <template slot="header">
            <input
              type="text"
              class="searchInput"
              @input="chooseSearchMessage"
              placeholder="输入关键字搜索"
              v-model="searchMessage"
              v-if="item.prop == 'option'"
            />
            <span v-if="item.prop != 'option'">{{ item.label }}</span>
          </template>
          <template slot-scope="scope">
            <span v-if="item.prop !== 'option' && item.prop !== 'time'">{{
              scope.row[item.prop]
            }}</span>
            <span v-if="item.prop === 'time'">{{
              scope.row[item.prop] | formatTime
            }}</span>
            <el-button
              type="danger"
              v-if="item.prop === 'option'"
              @click="startDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span class="error">确定删除该消息吗(不可改变)</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import format from "../formatTime";
interface messageInfo {
  id?: number;
  content?: string;
  time?: string;
  username?: string;
  realname?: string;
}
@Component({
  filters: {
    formatTime: (val: string) => {
      return format(val);
    },
  },
})
export default class message extends Vue {
  private searchMessage: string = "";
  private tableData: Array<any> = [];
  private tableDataAll: Array<any> = [];
  private tableItem: Array<object> = [
    { id: "0", prop: "id", label: "id" },
    { id: "1", prop: "content", label: "内容" },
    { id: "2", prop: "time", label: "创建时间" },
    { id: "3", prop: "username", label: "用户名" },
    { id: "4", prop: "realname", label: "昵称" },
    { id: "5", prop: "option", label: "操作" },
  ];
  private showCard: boolean = false;
  private id: number | string = 0;
  private content: string = "";
  private time: string = "";
  private username: string = "";
  private realname: string = "";
  private dialogVisible: boolean = false;
  created() {
    this.getAllMessage();
  }
  cancelEdit(): void {
    this.showCard = false;
  }
  startDel(val: any): void {
    this.dialogVisible = true;
    this.username = val.username;
    this.id = val.id;
  }
  chooseSearchMessage(): void {
    if (this.searchMessage !== "") {
      this.$axios
        .get("/advice/chooseSearch", {
          params: {
            username: this.searchMessage,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.error === -1) {
            this.tableData = res.data.data;
          } else {
            this.tableData = [];
          }
        });
    } else {
      this.tableData = this.tableDataAll;
    }
  }
  confirm(): void {
    this.$axios
      .post("/advice/del", {
        id: this.id,
        username: this.username,
        status: this.$store.state.user.userInfo.status,
      })
      .then((res) => {
        console.log(res);
        if (res.data.error === -1) {
          this.dialogVisible = false;
          this.$message({
            type: "success",
            message: "删除成功",
          });
          this.getAllMessage();
        } else {
          this.dialogVisible = false;
          this.$message({
            type: "error",
            message: "删除失败",
          });
        }
      });
  }
  getAllMessage(): void {
    this.$axios.get("/advice/search").then((res) => {
      console.log(res);
      if (res.data.error === -1) {
        this.tableData = res.data.data;
        this.tableDataAll = res.data.data;
      } else if (res.data.error === 0) {
        this.tableData = [];
      }
    });
  }
}
</script>

<style lang="less" scoped>
.Message {
  .error{
    color: red;
  }
  .bread {
    margin: 25px;
  }
  .table {
    margin-top: 25px;
    padding: 0 15px;
  }
  .searchInput {
    border-radius: 3px;
    border: 1px solid #DCDFE6;
    padding: 5px 10px;
    outline: none;
    &:focus {
      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
    }
  }
  .box-card {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: 60%;
    height: 500px;
    z-index: 9;

    .clearfix {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    span {
      margin: 0 10px;
    }
  }
}
</style>